<template>
  <div class="containers main-box">
    <el-button type="success" size="small" icon="ZoomIn" @click="zoomViewport(true)"
      >放大</el-button
    >
    <el-button type="warning" size="small" icon="ZoomOut" @click="zoomViewport(false)"
      >缩小</el-button
    >
    <el-button type="info" size="small" icon="Rank" @click="fitViewport">适中</el-button>
    <div class="canvas" ref="flowCanvas"></div>
  </div>
</template>
<script>
  import { CustomViewer as BpmnViewer } from '@/components/FlowView/index';

  export default {
    name: 'FlowView',
    props: {
      flowData: {
        type: Object,
        default: () => {},
      },
    },
    data() {
      return {
        bpmnViewer: null,
      };
    },
    watch: {
      flowData: {
        handler(newVal) {
          if (Object.keys(newVal).length > 0) {
            // 生成实例
            this.bpmnViewer && this.bpmnViewer.destroy();
            this.bpmnViewer = new BpmnViewer({
              container: this.$refs.flowCanvas,
              height: 'calc(100vh - 200px)',
            });
            this.loadFlowCanvas(newVal);
          }
        },
        immediate: true, // 立即生效
        deep: true, //监听对象或数组的时候，要用到深度监听
      },
    },
    mounted() {},
    methods: {
      // 加载流程
      async loadFlowCanvas(flowData) {
        // eslint-disable-next-line
        const self = this;
        try {
          await self.bpmnViewer.importXML(flowData.xmlData);
          self.fitViewport();
          if (flowData.nodeData !== undefined && flowData.nodeData.length > 0) {
            self.fillColor(flowData.nodeData);
          }
        } catch (err) {
          console.error(err.message, err.warnings);
        }
      },
      // 设置高亮颜色的class
      setNodeColor(nodeCodes, colorClass, canvas) {
        for (let i = 0; i < nodeCodes.length; i++) {
          canvas.addMarker(nodeCodes[i], colorClass);
        }
      },
      // 让图能自适应屏幕
      fitViewport() {
        this.zoom = this.bpmnViewer.get('canvas').zoom('fit-viewport', 'auto');
      },
      // 放大缩小
      zoomViewport(zoomIn = true) {
        this.zoom = this.bpmnViewer.get('canvas').zoom();
        this.zoom += zoomIn ? 0.1 : -0.1;
        if (this.zoom >= 0.2) this.bpmnViewer.get('canvas').zoom(this.zoom);
      },

      // 设置高亮颜色的
      fillColor(nodeData) {
        const canvas = this.bpmnViewer.get('canvas');
        this.bpmnViewer.getDefinitions().rootElements[0].flowElements.forEach((n) => {
          const completeTask = nodeData.find((m) => m.key === n.id);
          const todoTask = nodeData.find((m) => !m.completed);
          // const endTask = nodeData[nodeData.length - 1];
          if (n.$type === 'bpmn:UserTask') {
            if (completeTask) {
              canvas.addMarker(n.id, completeTask.completed ? 'highlight' : 'highlight-todo');
              n.outgoing?.forEach((nn) => {
                const targetTask = nodeData.find((m) => m.key === nn.targetRef.id);
                if (targetTask) {
                  if (todoTask && completeTask.key === todoTask.key && !todoTask.completed) {
                    canvas.addMarker(nn.id, todoTask.completed ? 'highlight' : 'highlight-todo');
                    canvas.addMarker(
                      nn.targetRef.id,
                      todoTask.completed ? 'highlight' : 'highlight-todo',
                    );
                  } else {
                    canvas.addMarker(nn.id, targetTask.completed ? 'highlight' : 'highlight-todo');
                    canvas.addMarker(
                      nn.targetRef.id,
                      targetTask.completed ? 'highlight' : 'highlight-todo',
                    );
                  }
                }
              });
            }
          }
          // 排他网关
          else if (n.$type === 'bpmn:ExclusiveGateway') {
            if (completeTask) {
              canvas.addMarker(n.id, completeTask.completed ? 'highlight' : 'highlight-todo');
              n.outgoing?.forEach((nn) => {
                const targetTask = nodeData.find((m) => m.key === nn.targetRef.id);
                if (targetTask) {
                  canvas.addMarker(nn.id, targetTask.completed ? 'highlight' : 'highlight-todo');
                  canvas.addMarker(
                    nn.targetRef.id,
                    targetTask.completed ? 'highlight' : 'highlight-todo',
                  );
                }
              });
            }
          }
          // 并行网关
          else if (n.$type === 'bpmn:ParallelGateway') {
            if (completeTask) {
              canvas.addMarker(n.id, completeTask.completed ? 'highlight' : 'highlight-todo');
              n.outgoing?.forEach((nn) => {
                const targetTask = nodeData.find((m) => m.key === nn.targetRef.id);
                if (targetTask) {
                  canvas.addMarker(nn.id, targetTask.completed ? 'highlight' : 'highlight-todo');
                  canvas.addMarker(
                    nn.targetRef.id,
                    targetTask.completed ? 'highlight' : 'highlight-todo',
                  );
                }
              });
            }
          } else if (n.$type === 'bpmn:StartEvent') {
            if (completeTask) {
              canvas.addMarker(n.id, 'highlight');
            }
            // n.outgoing.forEach((nn) => {
            //   const completeTask = nodeData.find((m) => m.key === nn.targetRef.id);
            //   if (completeTask) {
            //     canvas.addMarker(nn.id, 'highlight');
            //     canvas.addMarker(n.id, 'highlight');
            //     return;
            //   }
            // });
          } else if (n.$type === 'bpmn:EndEvent') {
            console.log('completeTask', completeTask);
            if (completeTask) {
              canvas.addMarker(n.id, completeTask.completed ? 'highlight' : '');
            }
            // if (endTask.key === n.id && endTask.completed) {
            //   canvas.addMarker(n.id, 'highlight');
            //   return;
            // }
          } else if (n.$type === 'bpmn:SequenceFlow') {
            if (completeTask) {
              canvas.addMarker(n.id, completeTask.completed ? 'highlight' : '');
            }
          }
        });
      },
    },
  };
</script>
<style lang="scss">
  .bjs-powered-by {
    display: none;
  }

  .view-mode {
    .el-header,
    .el-aside,
    .djs-palette,
    .bjs-powered-by {
      display: none;
    }

    .el-loading-mask {
      background-color: initial;
    }

    .el-loading-spinner {
      display: none;
    }
  }

  .containers {
    // background-color: #ffffff;
    width: 100%;
    height: 100%;

    .canvas {
      width: 100%;
      height: 100%;
    }

    .panel {
      position: absolute;
      top: 50px;
      right: 0;
      width: 300px;
    }

    .load {
      margin-right: 10px;
    }

    .el-form-item__label {
      font-size: 13px;
    }

    .djs-palette {
      top: 0;
      left: 0 !important;
      border-top: none;
    }

    .djs-container svg {
      min-height: 650px;
    }

    .highlight.djs-shape .djs-visual > :nth-child(1) {
      stroke: green !important;
      fill: green !important;
      fill-opacity: 0.2 !important;
    }

    .highlight.djs-shape .djs-visual > :nth-child(2) {
      fill: green !important;
    }

    .highlight.djs-shape .djs-visual > path {
      stroke: green !important;
      fill: green !important;
      fill-opacity: 0.2 !important;
    }

    .highlight.djs-connection > .djs-visual > path {
      stroke: green !important;
    }

    .highlight-todo.djs-connection > .djs-visual > path {
      stroke-dasharray: 4px !important;
      stroke: orange !important;
      fill-opacity: 0.2 !important;
    }

    .highlight-todo.djs-shape .djs-visual > :nth-child(1) {
      stroke-dasharray: 4px !important;
      stroke: orange !important;
      fill: orange !important;
      fill-opacity: 0.2 !important;
    }

    .overlays-div {
      top: -20px !important;
      width: 100px;
      color: red;
      font-size: 10px;
    }
  }
</style>
